<script setup>
import { ref, getCurrentInstance, onMounted, reactive, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import _ from 'lodash';

import kcpx from "@/assets/images/train/kcpx.png";
import zpjf from "@/assets/images/train/zpjf.png";
import tgkc from "@/assets/images/train/tgkc.png";
import wtg from "@/assets/images/train/wtg.png";
import pass from "@/assets/images/train/pass.png";
import error from "@/assets/images/train/error.png";
import api from "../../api";
const { proxy } = getCurrentInstance();

const route = useRouter();

let trainResultChartRef = ref();
let trainTopChartRef = ref();

let trainResultChart = null;
let trainTopChart = null;

const colorList = [
    { c1: '#F28662', c2: '#F8BFB1' },
    { c1: '#508EFF', c2: '#95BAFF' },
];

//工种
const workTypeOptions = [
    {
        label: "全部",
        value: "",
    },
    {
        label: "普工",
        value: "0",
    },
    {
        label: "混凝土工",
        value: "1",
    },
    {
        label: "抹灰工",
        value: "2",
    },
    {
        label: "油漆工",
        value: "3",
    },
];

const topData = reactive({
    fieldCondition: {
        traineesNum: 1316,
        trainCoursesNum: 5
    },
    trainResult: [
        { name: '通过', value: 1316 },
        { name: '不通过', value: 0 }
    ],
    trainTop: {
        nameArr: ['一级教育', '二级教育', '三级教育', '知识竞赛','VR知识教育'],
        scoreArr: [90, 85, 80, 76,74]
    }
});

const bottomData = reactive({
    tableData: [
        {
            name: '蔡抟伟',
            workType: '油漆工',
            pass: true,
            averageScores: 87,
            filePath:""
        },
        {
            name: '陈发旺',
            workType: '混凝土工',
            pass: true,
            averageScores: 95,
            idCardNo:"",
            filePath:""
        },
        {
            name: '陈广明',
            workType: '普工',
            pass: true,
            averageScores: 87,
            idCardNo:"",
            filePath:""
        },
        {
            name: '陈广堂',
            workType: '普工',
            pass: true,
            averageScores: 95,
            idCardNo:"",
            filePath:""
        },
        {
            name: '郭礼鹏',
            workType: '混凝土工',
            pass: true,
            averageScores: 85,
            idCardNo:"",
            filePath:""
        },
        {
            name: '郝财斌',
            workType: '混凝土工',
            pass: true,
            averageScores: 97,
            idCardNo:"",
            filePath:""
        },
        {
            name: '胡世清',
            workType: '普工',
            pass: true,
            averageScores: 83,
            idCardNo:"",
            filePath:""
        },
        {
            name: '纪伟',
            workType: '普工',
            pass: true,
            averageScores: 97,
            idCardNo:"",
            filePath:""
        },
        {
            name: '姜贵领',
            workType: '抹灰工',
            pass: true,
            averageScores: 93,
            idCardNo:"",
            filePath:""
        },
        {
            name: '姜永英',
            workType: '普工',
            pass: true,
            averageScores: 97,
            idCardNo:"",
            filePath:""
        },
        {
            name: '解国宏',
            workType: '普工',
            pass: true,
            averageScores: 93,
            idCardNo:"",
            filePath:""
        },
        {
            name: '李桂英',
            workType: '普工',
            pass: true,
            averageScores: 87,
            idCardNo:"",
            filePath:""
        },
        {
            name: '李倩',
            workType: '油漆工',
            pass: true,
            averageScores: 87,
            idCardNo:"",
            filePath:""
        },
        {
            name: '李银波',
            workType: '混凝土工',
            pass: true,
            averageScores: 95,
            idCardNo:"",
            filePath:""
        },
        {
            name: '刘书喜',
            workType: '抹灰工',
            pass: true,
            averageScores: 95,
            idCardNo:"",
            filePath:""
        },
        // {
        //     name: '刘大猛',
        //     workType: '模板工',
        //     pass: true,
        //     averageScores: 90,
        // },
        // {
        //     name: '王德发',
        //     workType: '管理班组',
        //     pass: true,
        //     averageScores: 90,
        // },
        // {
        //     name: '王文斌',
        //     workType: '木工',
        //     pass: true,
        //     averageScores: 85,
        // },
        // {
        //     name: '王进要',
        //     workType: '砌筑工',
        //     pass: true,
        //     averageScores: 75,
        // },
        // {
        //     name: '陈胜新',
        //     workType: '架子工',
        //     pass: true,
        //     averageScores: 96,
        // },
        // {
        //     name: '刁德一',
        //     workType: '钢筋工',
        //     pass: true,
        //     averageScores: 75,
        // },
        // {
        //     name: '霍正华',
        //     workType: '钢筋工',
        //     pass: false,
        //     averageScores: 55,
        // },
        // {
        //     name: '王斌',
        //     workType: '钢筋工',
        //     pass: true,
        //     averageScores: 68,
        // },
        // {
        //     name: '沈要',
        //     workType: '砌筑工',
        //     pass: true,
        //     averageScores: 85,
        // },
        // {
        //     name: '陈新',
        //     workType: '架子工',
        //     pass: true,
        //     averageScores: 93,
        // },
    ],
    workTypeSelected: '',
    keywords: '',
    personDetailDataTable:[
        {
            personName:"",
            workType:"",
            teamName:"",
            enterpriseName:"",
            faceUrl:"",
            gender:"",
            age:"",
            birthDate:"",
            national:"",
            idCardNo:"",
            startTime:""
        }
    ],
    detailInfo: {
        tableData: [
            { name: '一级教育', pass: true },
            { name: '二级教育', pass: true },
            { name: '三级教育', pass: true },
            { name: '知识竞赛', pass: true },
            { name: "VR知识教育", pass:true }
        ],
        info: {
            name: '蔡抟伟',
            code: '2111111',
        },
        simpleInfo: [
            {
                src: kcpx,
                name: '参与课程培训',
                color: '#676767',
                value: 5,
                unit: '科'
            },
            {
                src: zpjf,
                name: '总平均分',
                color: '#57C2AF',
                value: 80,
                unit: '分'
            },
            {
                src: tgkc,
                name: '通过课程',
                color: '#4EB0FC',
                value: 5,
                unit: '科'
            },
            {
                src: wtg,
                name: '未通过课程',
                color: '#F7BE6F',
                value: 0,
                unit: '科'
            },

        ],
        faceUrl:"https://uniubi-aiot.oss-cn-hangzhou.aliyuncs.com/detect/20231221/150055-2F4BB040A4E74AF4A6CE92ED3A622249"
    }
});

const initTrainTopChart = () => {
    let charttrainTopDom = document.getElementById('trainTopChart');
    echarts.dispose(charttrainTopDom);
    trainTopChart = echarts.init(trainTopChartRef.value);
    trainTopChart.clear();
    let option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            axisTick: {
                show: false
            },
            data: topData.trainTop.nameArr.reverse()
        },
        series: [
            {
                name: '课程',
                type: 'bar',
                data: topData.trainTop.scoreArr.reverse(),
                barWidth: 8,
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}分'
                },
                itemStyle: {
                    // 使用方法二的写法
                    color: {
                        type: "linear",
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 0, //上
                        colorStops: [
                            {
                                offset: 0,
                                color: "#C5CAF8", // 0% 处的颜色
                            },
                            // {
                            //     offset: 0.7,
                            //     color: '#2378f7' // 70% 处的颜色
                            // },
                            {
                                offset: 1,
                                color: "#8C8FF7", // 100% 处的颜色
                            },
                        ],
                    },
                    normal: {
                        barBorderRadius: [0, 7, 7, 0]
                    }
                },
            }
        ]
    };
    option && trainTopChart.setOption(option);
};

const initTrainResultChart = () => {
    let total = 0;
    for (let i = 0; i < topData.trainResult.length; i++) {
        total += topData.trainResult[i].value;
    };
    let chartTrainResultDom = document.getElementById("trainResultChart");
    echarts.dispose(chartTrainResultDom);
    trainResultChart = echarts.init(trainResultChartRef.value);
    trainResultChart.clear();
    let option1;
    option1 = {
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            itemWidth: 20, // 标志图形的长度
            itemHeight: 10, // 标志图形的宽度
            itemGap: 20,
            right: 25,
            top: 90,
            formatter: function (name) {
                var tarValue;
                for (let s = 0; s < topData.trainResult.length; s++) {
                    if (topData.trainResult[s].name == name) {
                        tarValue = topData.trainResult[s].value;
                    }
                }
                var v = tarValue;
                var p = Math.round(((tarValue / total) * 100));
                return `${name}  ${v}人(${p}%)`;
            },
        },
        series: [
            {
                name: "培训结果",
                type: "pie",
                radius: ["0%", "55%"],
                center: ["28%", "58%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    // borderRadius: 10,
                    // borderColor: '#fff',
                    // borderWidth: 2,
                    color: function (params) {
                        return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                                offset: 0,
                                color: colorList[params.dataIndex].c1,
                            },
                            {
                                offset: 1,
                                color: colorList[params.dataIndex].c2,
                            },
                        ]);
                    },
                },
                label: {
                    show: true,
                    position: "outside",
                    color: "#000",
                    formatter: function (params) {
                        var percent = 0;
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== "") {
                            return params.value + "人" + "\n" + percent + "%";
                            // return (
                            //     params.name + '\n' +
                            //     percent +
                            //     "%"
                            // );
                        } else {
                            return "";
                        }
                    },
                },
                labelLine: {
                    length: 5,
                    length2: 15,
                    show: true,
                    color: "#000",
                },
                data: topData.trainResult,
            },
        ],
    };
    option1 && trainResultChart.setOption(option1);
};


onMounted(() => {
    initTrainTopChart();
    initTrainResultChart();
    window.onresize = _.debounce(() => {
        trainResultChart.resize();
        trainTopChart.resize();
    })
    let initIdCardNo = bottomData.tableData[0].idCardNo
    api.staff.getPersonInfoDetailById({idCardNo: initIdCardNo}).then((res)=>{
        let detailInfo = res.data
        console.log(detailInfo)
        bottomData.detailInfo.faceUrl = detailInfo.faceUrl
        bottomData.detailInfo.info.name = detailInfo.personName
        bottomData.detailInfo.info.code = detailInfo.id
    })
    bottomData.detailInfo.simpleInfo[1].value = bottomData.tableData[0].averageScores
});

onBeforeUnmount(() => {
    window.onresize = null;
})

let handleDownloadClick = (row)=>{
    console.log(row)
    console.log(111)
    console.log(row.filePath)
    api.document
      .downloadFile({
        filePath: row.filePath,
      })
      .then((blob) => {
        const blobData = new Blob([blob]);
        const url = window.URL.createObjectURL(blobData);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "培训报告.pdf");
        document.body.appendChild(link);
        link.click();
        //下载完成移除元素
        document.body.removeChild(link);
        //释放掉blob对象
        window.URL.revokeObjectURL(url);
      });
}

let handleRowClick = async (row)=>{
    console.log(row)
    api.staff.getPersonInfoDetailById({idCardNo: row.idCardNo}).then((res)=>{
        let detailInfo = res.data
        console.log(detailInfo)
        bottomData.detailInfo.faceUrl = detailInfo.faceUrl
        bottomData.detailInfo.info.name = detailInfo.personName
        bottomData.detailInfo.info.code = detailInfo.id
    })
    bottomData.detailInfo.simpleInfo[1].value = row.averageScores
}

</script>

<template>
    <div class="train">
        <div class="trainTop">
            <div class="trainTopItem fieldCondition">
                <div class="title">培训概况</div>
                <div class="fieldItem" style="margin-top: 65px;"><img
                        src="@/assets/images/train/pxrs.png" /><span>培训总人数<span class="blueSpan">{{
                            topData.fieldCondition.traineesNum }}</span>人</span></div>
                <div class="fieldItem"><img src="@/assets/images/train/kczs.png" /><span>课程总数<span class="greenSpan">{{
                    topData.fieldCondition.trainCoursesNum }}</span>科</span></div>
            </div>
            <div class="trainTopItem trainResultContainer">
                <div class="title">培训结果</div>
                <div ref="trainResultChartRef" id="trainResultChart"></div>
            </div>
            <div class="trainTopItem trainTopContainer">
                <div class="title">Top5课程</div>
                <div ref="trainTopChartRef" id="trainTopChart"></div>
            </div>
        </div>
        <div class="trainBottom">
            <div class="tableContainer">
                <div class="title">培训人员记录</div>
                <div class="searchPanel">
                    <!-- <span>工种</span>
                    <el-select v-model="bottomData.workTypeSelected">
                        <el-option v-for="item in workTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-input v-model="bottomData.keywords" placeholder="请输入人员姓名" size="small" style="margin-left:20px ;">
                        <template #append><el-button>搜索</el-button></template>
                    </el-input> -->
                </div>
                <el-table :data="bottomData.tableData" stripe style="width: 95%;margin: 0 auto;" @row-click="handleRowClick" height="520">
                    <el-table-column type="index" label="序号" width="55" align="center" />
                    <el-table-column prop="name" label="姓名" align="center" />
                    <el-table-column prop="workType" label="工种" align="center" />
                    <el-table-column prop="pass" label="是否通过" align="center">
                        <template #default="scope">
                            <span :style="{ color: scope.row.pass ? '#13C580' : '#F66C18' }">{{ scope.row.pass ? '是' : '否'
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="averageScores" label="总平均分" align="center" />
                    <el-table-column label="下载" align="center" >
                        <template #default="scope">
                            <div @click="handleDownloadClick(scope.row)" style="cursor: pointer;">
                                <img src="@/assets/images/train/pdf.png" style="width: 20px;" />
                                <span
                                    style="padding-left: 3px;" >培训报告.pdf
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="detailInfo">
                <div class="title">基本信息</div>
                <div class="simpleInfo">
                    <div class="l-p">
                        <img :src="bottomData.detailInfo.faceUrl" alt="">
                    </div>
                    <div class="infoList">
                        <div class="infoItem" v-for="item in bottomData.detailInfo.simpleInfo" :key="item.type">
                            <div class="leftPic">
                                <img :src="item.src" />
                            </div>
                            <div class="rightSpan">
                                <span>{{ item.name }}</span><br />
                                <span :style="{ color: item.color }" class="colorSpan">{{ item.value }}</span><span
                                    class="unitSpan">{{ item.unit }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="baseInfo">
                    <el-form :inline="true" label-position="left" label-width="90px">
                        <el-form-item label="姓名:">
                            <span>{{ bottomData.detailInfo.info.name }}</span>
                        </el-form-item>
                        <el-form-item label="工号:">
                            <span>{{ bottomData.detailInfo.info.code }}</span>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="bottomData.detailInfo.tableData" stripe style="width: 95%;margin: 0 auto;" height="320">
                    <el-table-column type="index" label="序号" width="55" align="center" />
                    <el-table-column prop="name" label="培训名称" align="center" />
                    <el-table-column prop="pass" label="是否通过" align="center">
                        <template #default="scope">
                            <img style="width: 25px;" :src="scope.row.pass ? pass : error" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.train {
    width: 100%;
    height: calc(100vh - 85px);
    font-family: SourceHanSansSC;
    overflow-x: hidden;
    overflow-y: auto;

    .trainTop {
        width: 100%;
        overflow: hidden;

        .trainTopItem {
            float: left;
            position: relative;
            margin: 0 8px;
            height: 230px;
            background-color: white;
            border: 1px solid #DCE3EF;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;

            @media only screen and (max-width: 1900px) {
                margin-right: 20px;
            }

            .title {
                position: absolute;
                top: 9px;
                height: 20px;
                padding-left: 5px;
                margin-left: 10px;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 600;
                color: #656565;
                line-height: 20px;
                border-left: 3px solid #8F93F7;
            }
        }
    }

    .trainBottom {
        width: 100%;
        display: flex;

        .tableContainer {
            position: relative;
            width: 66%;
            height: calc(100% - 317px);
            margin-top: 8px;
            margin-left: 8px;
            border: 1px solid #DCE3EF;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
            overflow: hidden;

            .title {
                position: absolute;
                top: 9px;
                height: 20px;
                padding-left: 5px;
                margin-left: 10px;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 600;
                color: #656565;
                line-height: 20px;
                border-left: 3px solid #8F93F7;
            }

            .searchPanel {
                display: flex;
                align-items: center;
                margin-top: 35px;
                margin-bottom: 20px;
                justify-content: flex-end;
                padding-right: 20px;

                // :deep .el-select-dropdown {
                //     min-width: none;
                // }

                // :deep .el-select {
                //     width: 90px;
                // }

                :deep .el-date-editor {
                    width: 250px;
                    margin-right: 25px;
                }

                :deep .el-input-group {
                    width: 25%;
                    font-size: 14px;
                    margin-right: 20px;
                }

                span {
                    padding: 0 10px;
                }
            }


            :deep .el-table th.el-table__cell {
                background-color: #ECEDFF;
            }
        }

        .detailInfo {
            position: relative;
            width: 32%;
            height: calc(100% - 317px);
            margin-top: 8px;
            margin-left: 15px;
            border: 1px solid #DCE3EF;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
            overflow: hidden;

            .title {
                position: absolute;
                top: 9px;
                height: 20px;
                padding-left: 5px;
                margin-left: 10px;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 600;
                color: #656565;
                line-height: 20px;
                border-left: 3px solid #8F93F7;
            }

            .simpleInfo {
                width: 95%;
                margin: 45px 0 20px 0;
                padding-left: 15px;
                display: flex;

                .infoList {
                    display: flex;
                    flex-wrap: wrap;
                    width: 65%;
                    overflow: hidden;
                    margin-left: 10px;


                    .infoItem {
                        display: flex;
                        margin-left: 25px;
                        margin-top: 30px;

                        @media only screen and (max-width: 1900px) {
                            margin-left: 0px;
                        }

                        .leftPic {
                            width: 45px;

                            img {
                                width: 100%;
                            }

                            @media only screen and (max-width: 1900px) {
                                width: 30px;
                            }
                        }

                        .rightSpan {
                            width: 100px;
                            font-size: 16px;
                            font-family: Source Han Sans SC;
                            font-weight: 500;
                            color: #656565;
                            margin-left: 10px;

                            .colorSpan {
                                font-size: 20px;
                                font-family: Source Han Sans SC;
                                font-weight: bold;
                                padding-right: 5px;
                            }

                            .unitSpan {
                                font-size: 14px;
                            }
                        }
                    }
                }

                .l-p {
                    width: 138px;
                    height: 171px;
                    border: 1px solid #EEF3FD;
                    text-align: center;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    // background-repeat: no-repeat;
                    // background-size: 100% 100%;
                    // background-image: url("@/assets/images/staff/person.png");
                }
            }

            .baseInfo {
                box-sizing: border-box;
                width: 95%;
                margin: 0 auto;
                border: 1px solid #DCE3EF;
                border-radius: 6px;
                padding-left: 41px;
                margin-bottom: 15px;
            }

            :deep .el-table th.el-table__cell {
                background-color: #ECEDFF;
            }

            :deep .el-form-item {
                margin-bottom: 0px;
            }

            :deep .el-form-item__content {
                width: 110px;

                @media only screen and (max-width: 1900px) {
                    width: 60px;
                }
            }
        }
    }
}

.fieldCondition {
    width: 29%;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #656565;
    line-height: 23px;

    .fieldItem {
        padding-left: 12%;
        margin-bottom: 10px;
    }

    img {
        width: 50px;
        padding-right: 10px;
    }
}

.trainResultContainer {
    width: 29%;
}

.trainTopContainer {
    width: 39%;

    @media only screen and (max-width: 1900px) {
        width: 37%;
        margin-right: 0px !important;
    }

}

.blueSpan {
    font-size: 50px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #78C8FF;
    padding: 20px;
}

.greenSpan {
    font-size: 50px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #70E3AE;
    line-height: 70px;
    padding: 20px;
}

#trainResultChart {
    width: 100%;
    max-width: 550px;
    height: 230px;
}

#trainTopChart {
    //width: 100%;
    max-width: 736px;
    height: 230px;
}
</style>
